<template>
  <div class="popupBox" >
    <div>当前坐标</div>
    <h2 @click="handleClick()">
      {{ attrs.latlng.lat }},{{ attrs.latlng.lng }}{{ state.nums }}
    </h2>
  </div>
</template>

<script lang='ts' setup>
import {
  ref,
  h,
  reactive,
  inject,
  onMounted,
  useAttrs,
  defineEmits,
  onDeactivated,
} from "vue";

import Map from "./map_function";
const LF = new Map();

let attrs = useAttrs();

console.log(attrs);
const state = reactive({
  nums: 0,
});
const emits = defineEmits(["change"]);
const handleClick = () => {
  console.log("点击弹窗内容");
  emits("change", "获取点击弹窗内容");
  SetEventMarker([25.794808, 118.047489], "info");
};
//图标过滤
const iconFilter = (type: String) => {
  return type === "info"
    ? "./address_info.png"
    : type === "red"
    ? "./address_red.png"
    : "";
};
const SetEventMarker = (latlngs: number[], type: String) => {
  let iconUrl = iconFilter(type);
  const { _map, icon_markers } = attrs.LF.__create_icon_marker({
    latlngs,
    iconUrl,
    iconSize: [30, 30],
  });
};

onDeactivated(() => {
  console.log(123123);
});
</script>
<style scoped>
.popupBox {
  width: 300px;
  height: 200px;
  background-color: rgba(24, 48, 87, 1) !important;
  color: #fff;
}
h2:hover {
  cursor: pointer;
  color: rgb(56, 196, 196);
}
</style>